```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Service技术对比：SOAP与RESTful</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 8px;
            overflow: hidden;
        }
        .code-header {
            background-color: #1e1e1e;
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .code-copy-btn {
            color: #ccc;
            cursor: pointer;
            transition: all 0.3s;
        }
        .code-copy-btn:hover {
            color: #fff;
        }
        .feature-card {
            transition: transform 0.3s, box-shadow 0.3s;
            border-radius: 12px;
            overflow: hidden;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .compare-table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }
        .compare-table th, .compare-table td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        .compare-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .compare-table tr:hover td {
            background-color: #f8f9fa;
        }
        .highlight {
            position: relative;
        }
        .highlight::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, rgba(110,142,251,0.3) 0%, rgba(167,119,227,0.3) 100%);
            z-index: -1;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6">Web Service技术对比</h1>
                    <h2 class="text-2xl md:text-3xl font-semibold mb-8">SOAP与RESTful的深度解析</h2>
                    <p class="text-lg mb-8 opacity-90 leading-relaxed">在分布式系统架构中，理解SOAP和RESTful Web Service的核心差异对于技术选型至关重要。本文将深入分析两种技术的设计理念、实现方式和适用场景。</p>
                    <div class="flex space-x-4">
                        <a href="#comparison" class="bg-white text-purple-700 hover:bg-purple-100 px-6 py-3 rounded-lg font-medium transition duration-300">
                            <i class="fas fa-balance-scale mr-2"></i>对比分析
                        </a>
                        <a href="#implementation" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-700 px-6 py-3 rounded-lg font-medium transition duration-300">
                            <i class="fas fa-code mr-2"></i>实现示例
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute inset-0 bg-white opacity-10 rounded-xl transform rotate-6"></div>
                        <div class="relative bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-6 shadow-xl">
                            <div class="mermaid">
                                graph TD
                                    A[Web Service] --> B[SOAP]
                                    A --> C[RESTful]
                                    B --> D[XML格式]
                                    B --> E[WSDL描述]
                                    B --> F[企业级应用]
                                    C --> G[JSON/XML]
                                    C --> H[HTTP方法]
                                    C --> I[互联网应用]
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-6xl px-4 py-16">
        <!-- Introduction -->
        <section class="mb-20">
            <p class="text-lg leading-relaxed mb-8">在当今的软件开发领域，<span class="highlight font-semibold">Web Service（Web 服务）</span>是系统间通信的核心技术之一。两种最常见的Web Service形式是<span class="highlight font-semibold">SOAP（Simple Object Access Protocol）</span>和<span class="highlight font-semibold">RESTful Web Service</span>。虽然它们的目标都是提供跨平台、跨语言的服务调用方式，但在架构设计、数据格式、性能、安全性等方面存在较大差异。</p>
        </section>

        <!-- Section 1: Basic Concepts -->
        <section id="basic-concepts" class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center relative">
                <span class="relative z-10 px-4 bg-gray-50">SOAP与RESTful Web Service基本概念</span>
                <span class="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent z-0"></span>
            </h2>

            <!-- SOAP Part -->
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <span class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-4">1</span>
                    SOAP（Simple Object Access Protocol）
                </h3>
                <p class="mb-6">SOAP是一种基于<span class="font-semibold">XML（Extensible Markup Language）</span>的通信协议，主要用于在网络上进行结构化信息交换。它最早由W3C组织定义，依赖<span class="font-semibold">HTTP、SMTP或其他协议</span>进行数据传输，强调标准化和可靠性。</p>
                
                <div class="grid md:grid-cols-2 gap-8 mb-8">
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="text-blue-500 mb-4">
                            <i class="fas fa-list-check text-3xl"></i>
                        </div>
                        <h4 class="font-bold text-xl mb-3">SOAP主要特点</h4>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>使用<b>XML</b>作为消息格式，严格遵循XML Schema规范</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>依赖<b>WSDL</b>进行接口描述，使客户端能够自动生成调用代码</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>支持<b>WS-Security</b>，可以实现消息级别的加密与认证</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>适用于<b>企业级应用</b>，尤其是在需要高可靠性、安全性和事务控制的系统中</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <span class="text-sm font-mono">SOAP 消息示例</span>
                            <button class="code-copy-btn text-sm">
                                <i class="far fa-copy"></i> 复制
                            </button>
                        </div>
                        <pre class="p-4 overflow-x-auto"><code class="language-xml">&lt;soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
                  xmlns:web="http://example.com/webservice"&gt;
   &lt;soapenv:Header/&gt;
   &lt;soapenv:Body&gt;
      &lt;web:GetUser&gt;
         &lt;web:userId&gt;123&lt;/web:userId&gt;
      &lt;/web:GetUser&gt;
   &lt;/soapenv:Body&gt;
&lt;/soapenv:Envelope&gt;</code></pre>
                    </div>
                </div>
                <p class="text-gray-600"><i class="fas fa-info-circle text-blue-500 mr-2"></i>SOAP消息通常包含<b>Envelope（信封）、Header（头部，可选）、Body（主体）</b>，格式固定且冗长。</p>
            </div>

            <!-- RESTful Part -->
            <div>
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <span class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white mr-4">2</span>
                    RESTful Web Service（Representational State Transfer）
                </h3>
                <p class="mb-6">RESTful Web Service基于<b>REST（表述性状态转移）</b>架构风格，通过<b>HTTP协议</b>提供轻量级的服务接口。REST设计原则强调资源的概念，将服务端的数据视为<b>资源（Resource）</b>，并使用<b>HTTP方法（GET、POST、PUT、DELETE）</b>进行操作。</p>
                
                <div class="grid md:grid-cols-2 gap-8 mb-8">
                    <div class="feature-card bg-white p-6 shadow-md">
                        <div class="text-purple-500 mb-4">
                            <i class="fas fa-bolt text-3xl"></i>
                        </div>
                        <h4 class="font-bold text-xl mb-3">REST主要特点</h4>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>以<b>URL</b>作为资源标识符（URI），符合REST设计风格</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>采用<b>JSON或XML</b>作为数据格式（JSON更为常见）</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>没有强制依赖额外的协议，如WSDL，而是通过HTTP约定接口规范</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
                                <span>适用于<b>互联网应用</b>，如移动端、微服务架构、开放API平台等</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="code-block">
                        <div class="code-header">
                            <span class="text-sm font-mono">RESTful API 示例</span>
                            <button class="code-copy-btn text-sm">
                                <i class="far fa-copy"></i> 复制
                            </button>
                        </div>
                        <pre class="p-4 overflow-x-auto"><code class="language-javascript">GET /users/123 HTTP/1.1
Host: api.example.com
Accept: application/json

// 响应
{
  "id": 123,
  "name": "Alice",
  "email": "alice@example.com"
}</code></pre>
                    </div>
                </div>
                <p class="text-gray-600"><i class="fas fa-info-circle text-purple-500 mr-2"></i>相比SOAP，RESTful Web Service更加简洁、轻量级，能更好地适应前后端分离和高并发应用场景。</p>
            </div>
        </section>

        <!-- Section 2: Comparison -->
        <section id="comparison" class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center relative">
                <span class="relative z-10 px-4 bg-gray-50">SOAP与RESTful Web Service的区别</span>
                <span class="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent z-0"></span>
            </h2>

            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <table class="compare-table">
                    <thead>
                        <tr>
                            <th class="text-left">特性</th>
                            <th class="text-left">SOAP</th>
                            <th class="text-left">RESTful</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><b>协议</b></td>
                            <td>独立协议，基于XML</td>
                            <td>基于HTTP，符合REST设计</td>
                        </tr>
                        <tr>
                            <td><b>数据格式</b></td>
                            <td>仅支持XML</td>
                            <td>支持JSON、XML、HTML、文本等</td>
                        </tr>
                        <tr>
                            <td><b>性能</b></td>
                            <td>XML格式庞大，解析慢</td>
                            <td>JSON更轻量，传输效率高</td>
                        </tr>
                        <tr>
                            <td><b>安全性</b></td>
                            <td>内置WS-Security，适用于企业级安全</td>
                            <td>依赖HTTPS、OAuth2、JWT</td>
                        </tr>
                        <tr>
                            <td><b>事务支持</b></td>
                            <td>支持ACID事务</td>
                            <td>事务支持较弱，一般依赖应用层</td>
                        </tr>
                        <tr>
                            <td><b>适用场景</b></td>
                            <td>适用于金融、政府、企业内部系统</td>
                            <td>适用于互联网、移动端、微服务</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="mt-8 p-6 bg-blue-50 rounded-lg border border-blue-100">
                <h4 class="font-bold text-lg text-blue-800 mb-3 flex items-center">
                    <i class="fas fa-lightbulb text-blue-500 mr-2"></i>技术选型建议
                </h4>
                <p class="text-blue-800">SOAP由于其安全性、可靠性、事务支持等特点，仍然被用于<b>银行交易、支付系统、企业级系统</b>等场景。RESTful Web Service由于其<b>轻量级、扩展性好、适应前后端分离架构</b>，在现代Web和移动开发中占据主流地位。</p>
            </div>
        </section>

        <!-- Section 3: Implementation -->
        <section id="implementation" class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center relative">
                <span class="relative z-10 px-4 bg-gray-50">SOAP与RESTful Web Service在Java中的实现</span>
                <span class="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent z-0"></span>
            </h2>

            <div class="grid md:grid-cols-2 gap-8">
                <!-- SOAP Implementation -->
                <div>
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="bg-blue-500 text-white px-6 py-4">
                            <h3 class="text-xl font-bold flex items-center">
                                <i class="fas fa-server mr-3"></i>使用JAX-WS实现SOAP Web Service
                            </h3>
                        </div>
                        <div class="p-6">
                            <div class="mb-6">
                                <h4 class="font-bold text-lg mb-3 flex items-center text-blue-600">
                                    <span class="bg-blue-100 rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
                                    定义WebService接口
                                </h4>
                                <div class="code-block">
                                    <div class="code-header">
                                        <span class="text-sm font-mono">UserService.java</span>
                                        <button class="code-copy-btn text-sm">
                                            <i class="far fa-copy"></i> 复制
                                        </button>
                                    </div>
                                    <pre class="p-4 overflow-x-auto"><code class="language-java">@WebService
public interface UserService {
    @WebMethod
    User getUser(@WebParam(name = "userId") int userId);
}</code></pre>
                                </div>
                            </div>

                            <div class="mb-6">
                                <h4 class="font-bold text-lg mb-3 flex items-center text-blue-600">
                                    <span class="bg-blue-100 rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
                                    实现WebService
                                </h4>
                                <div class="code-block">
                                    <div class="code-header">
                                        <span class="text-sm font-mono">UserServiceImpl.java</span>
                                        <button class="code-copy-btn text-sm">
                                            <i class="far fa-copy"></i> 复制
                                        </button>
                                    </div>
                                    <pre class="p-4 overflow-x-auto"><code class="language-java">@WebService(endpointInterface = "com.example.UserService")
public class UserServiceImpl implements UserService {
    @Override
    public User getUser(int userId) {
        return new User(userId, "Alice", "alice@example.com");
    }
}</code></pre>
                                </div>
                            </div>

                            <div>
                                <h4 class="font-bold text-lg mb-3 flex items-center text-blue-600">
                                    <span class="bg-blue-100 rounded-full w-6 h-6 flex items-center justify-center mr-3">3</span>
                                    发布WebService
                                </h4>
                                <div class="code-block">
                                    <div class="code-header">
                                        <span class="text-sm font-mono">WebServicePublisher.java</span>
                                        <button class="code-copy-btn text-sm">
                                            <i class="far fa-copy"></i> 复制
                                        </button>
                                    </div>
                                    <pre class="p-4 overflow-x-auto"><code class="language-java">public class WebServicePublisher {
    public static void main(String[] args) {
        Endpoint.publish("http://localhost:8080/UserService", 
                        new UserServiceImpl());
    }
}</code></pre>
                                </div>
                            </div>

                            <div class="mt-4 p-4 bg-blue-50 rounded-lg">
                                <p class="text-blue-800"><i class="fas fa-info-circle mr-2"></i>JAX-WS会自动生成WSDL供客户端调用，访问<code class="bg-blue-100 px-2 py-1 rounded">http://localhost:8080/UserService?wsdl</code>即可查看。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- RESTful Implementation -->
                <div>
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <div class="bg-purple-500 text-white px-6 py-4">
                            <h3 class="text-xl font-bold flex items-center">
                                <i class="fas fa-code-branch mr-3"></i>使用Spring Boot实现RESTful Web Service
                            </h3>
                        </div>
                        <div class="p-6">
                            <div class="mb-6">
                                <h4 class="font-bold text-lg mb-3 flex items-center text-purple-600">
                                    <span class="bg-purple-100 rounded-full w-6 h-6 flex items-center justify-center mr-3">1</span>
                                    创建REST Controller
                                </h4>
                                <div class="code-block">
                                    <div class="code-header">
                                        <span class="text-sm font-mono">UserController.java</span>
                                        <button class="code-copy-btn text-sm">
                                            <i class="far fa-copy"></i> 复制
                                        </button>
                                    </div>
                                    <pre class="p-4 overflow-x-auto"><code class="language-java">@RestController
@RequestMapping("/users")
public class UserController {

    @GetMapping("/{id}")
    public User getUser(@PathVariable int id) {
        return new User(id, "Alice", "alice@example.com");
    }
}</code></pre>
                                </div>
                            </div>

                            <div>
                                <h4 class="font-bold text-lg mb-3 flex items-center text-purple-600">
                                    <span class="bg-purple-100 rounded-full w-6 h-6 flex items-center justify-center mr-3">2</span>
                                    启动Spring Boot
                                </h4>
                                <div class="code-block">
                                    <div class="code-header">
                                        <span class="text-sm font-mono">RestApiApplication.java</span>
                                        <button class="code-copy-btn text-sm">
                                            <i class="far fa-copy"></i> 复制
                                        </button>
                                    </div>
                                    <pre class="p-4 overflow-x-auto"><code class="language-java">@SpringBootApplication
public class RestApiApplication {
    public static void main(String[] args) {
        SpringApplication.run(RestApiApplication.class, args);
    }
}</code></pre>
                                </div>
                            </div>

                            <div class="mt-4 p-4 bg-purple-50 rounded-lg">
                                <p class="text-purple-800"><i class="fas fa-info-circle mr-2"></i>访问<code class="bg-purple-100 px-2 py-1 rounded">http://localhost:8080/users/123</code>即可返回JSON数据。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section 4: Selection Guide -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center relative">
                <span class="relative z-10 px-4 bg-gray-50">何时选择SOAP？何时选择RESTful？</span>
                <span class="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent z-0"></span>
            </h2>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-blue-600 text-white px-6 py-4 flex items-center">
                        <i class="fas fa-building text-2xl mr-3"></i>
                        <h3 class="text-xl font-bold">选择SOAP的场景</h3>
                    </div>
                    <div class="p-6">
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
                                    <i class="fas fa-shield-alt text-blue-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-blue-800">企业级应用</h4>
                                    <p class="text-gray-700">如银行、政府、保险等需要高安全性和可靠性的系统</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
                                    <i class="fas fa-lock text-blue-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-blue-800">需要严格的安全性</h4>
                                    <p class="text-gray-700">WS-Security提供消息级别的加密与认证</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-blue-100 rounded-full p-2 mr-4">
                                    <i class="fas fa-exchange-alt text-blue-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-blue-800">需要事务支持</h4>
                                    <p class="text-gray-700">支持ACID事务，适用于复杂的业务流程</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-purple-600 text-white px-6 py-4 flex items-center">
                        <i class="fas fa-globe text-2xl mr-3"></i>
                        <h3 class="text-xl font-bold">选择RESTful的场景</h3>
                    </div>
                    <div class="p-6">
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
                                    <i class="fas fa-mobile-alt text-purple-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-purple-800">互联网应用</h4>
                                    <p class="text-gray-700">如移动端、前后端分离应用等轻量级场景</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
                                    <i class="fas fa-tachometer-alt text-purple-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-purple-800">高并发、大规模API服务</h4>
                                    <p class="text-gray-700">JSON格式轻量，更适合高性能需求</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
                                    <i class="fas fa-expand-arrows-alt text-purple-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-purple-800">性能要求高</h4>
                                    <p class="text-gray-700">轻量级协议，传输效率更高</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto px-4 max-w-6xl">
            <div class="text-center">
                <h3 class="text-xl font-medium text-white mb-2">技术小馆</h3>
                <p class="mb-6">专业的技术分享与学习平台</p>
                <div class="flex justify-center space-x-4">
                    <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition duration-300">
                        <i class="fas fa-globe text-lg"></i>
                    </a>
                </div>
                <p class="mt-6 text-sm text-gray-500">
                    &copy; 2023 技术小馆. All rights reserved.
                </p>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            themeVariables: {
                primaryColor: '#6e8efb',
                primaryBorderColor: '#a777e3',
                primaryTextColor: '#fff',
                lineColor: '#a777e3'
            }
        });

        // Copy code functionality
        document.querySelectorAll('.code-copy-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const codeBlock = btn.closest('.code-block').querySelector('code');
                const codeText = codeBlock.textContent;
                
                navigator.clipboard.writeText(codeText).then(() => {
                    const originalIcon = btn.innerHTML;
                    btn.innerHTML = '<i class="fas fa-check"></i> 已复制';
                    
                    setTimeout(() => {
                        btn.innerHTML = originalIcon;
                    }, 2000);
                });
            });
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
</body>
</html>
```